<template>
  <view class="wrap">
    <u-card class="breadCrumb" :show-head="false" :show-foot="false" padding="20" :border="false">
      <ul slot="body">
        <li @tap="backToHome">
          <u-icon name="home" color="#999" size="small"></u-icon>
          <span>首页</span>
          <u-icon name="arrow-right-double" color="#999" size="small"></u-icon>
        </li>
        <li>
          为您找到<span>{{ total }}</span>个包含"<span>{{ keywords }}</span>"的商品
        </li>
      </ul>
    </u-card>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <u-card :show-head="false" v-for="(item, index) in showList" :key="index">
        <view class="item" slot="body" @tap="changeToDetail(item)" :class="item.show === false ? 'soldOut' : ''">
          <u-image width="160rpx" class="img" height="160rpx" :border-radius="6"
            :src="item.pic | formatInner"></u-image>
          <view class="u-line-2">{{ item.title }}</view>
          <view class="tags">
            <span v-for="(keywords, index3) in (item.keywords || '').split(',')" :key="index3">
              <span v-if="keywords === ''"> 优惠中 </span>
              <span v-else>
                {{ keywords }}
              </span>
            </span>
          </view>
          <view class="card-footer">
            <span class="price">￥{{ item.price }}</span>
            <span class="details">详情</span>
          </view>
        </view>
      </u-card>
      <u-divider style="margin-top: 30px" v-if="hasNext">上拉加载更多</u-divider>
    </mescroll-body>

    <!-- 搜索为空 提示并跳转 -->
    <u-toast ref="noResult"></u-toast>

    <view style="background-color: #e4e7ed; margin-top: 30px">
      <p style="text-align: center">
        {{ footerstr }}
      </p>
    </view>

    <!-- 错误提示 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import {
    publicApi
  } from '@/utils/public.js'
  import {
    tablePageSize,
    tableCurrent
  } from '@/common/initData/config'
  import {
    searchGoods
  } from '@/utils/goods.js'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'

  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
      return {
        showList: [],
        footerstr: '',
        hasNext: true,
        currentPage: tableCurrent,
        pageSize: tablePageSize,
        total: 0,
        keywords: '',
        shopId: '',
        salerId: ''
      }
    },
    components: {},
    filters: {
      formatInner: function(path) {
        if (path.substring(0, 1) === '[') {
          return (
            'http://jd.youyuanren.net:9999/__kb/kfile' + JSON.parse(path)[0].url
          )
        } else {
          return path
        }
      }
    },
    onPageScroll(e) {
      this.scrollTopVal = e.scrollTop
    },
    onLoad(options) {
      console.log(options);
      this.keywords = options.keywords
      this.shopId = options.shopId
      this.salerId = options.salerId

      publicApi({
          params: JSON.stringify({
            salerId: options.salerId,
            shopId: options.shopId,
            isFront: 1
          })
        })
        .then(res => {
          this.footerstr = res.footerstr
        })
        .catch(e => {
          console.log(e)
        })
      this.searchByKeywords()
    },

    methods: {
      /*上拉加载的回调*/
      upCallback(page) {
        this.pageSize = page.size
        this.currentPage = page.num
        this.searchByKeywords()
      },
      searchByKeywords(salerId, shopId) {
        searchGoods({
            params: JSON.stringify({
              pageSize: this.pageSize,
              currentPage: this.currentPage,
              keywords: this.keywords,
              shopId: this.shopId,
              salerId: this.salerId,
              isFront: 1
            })
          })
          .then(res => {
            console.log('search', res)
            res = res.data
            this.total = res.total
            if (res.rows.length === 0) {
              this.$refs.noResult.show({
                title: '抱歉，未能为您找到对应的商品！\n\n即将为您跳转回首页。',
                type: 'error',
                icon: false,
                duration: 4000,
                callback:()=>{
                 uni.switchTab({
                   url:'/pages/index/index'
                 })
                }
              })
            } else {
              if (this.currentPage == 1) this.showList = []
              if (res.rows.length < this.pageSize) {
                this.hasNext = false
              } else {
                this.hasNext = true
              }
              this.mescroll.endSuccess(res.rows.length, this.hasNext)
              this.showList = this.showList.concat(res.rows)
            }
          })
          .catch(e => {
            console.log(e)
          })
      },
      changeToDetail(item) {
        // console.log(item)
        if (item.inStock == 0) {
          this.$refs.uToast.show({
            title: '该商品库存不足',
            type: 'error',
            duration: '1500'
          })
        } else {
          // this.$u.route({
          //   url: 'pages/index/detail',
          //   params: {
          //     id: item.id,
          //     salerId: this.$route.query.salerId,
          //     shopId: this.$route.query.shopId
          //   }
          // })
          uni.navigateTo({
            url:'/pages/detail/detail?id='+item.id+'&salerId='+this.salerId+'&shopId='+this.shopId
          })
        }
      },
      backToHome() {
        this.$u.route({
          url: 'pages/index/index',
          params: {
            salerId: this.$route.query.salerId,
            shopId: this.$route.query.shopId
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  page {
    background-color: #f0f0f0;
  }

  .wrap {
    .u-toast {
      width: 550rpx;
    }

    /deep/ .breadCrumb {
      margin-top: 20rpx;
      font-size: 26rpx;

      ul {
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #666;

        li {
          display: flex;
          align-items: center;

          .u-icon {
            margin: 0 10rpx;
          }

          &:last-child {
            span {
              color: #fd2f3d;
            }
          }
        }
      }
    }

    /deep/ .item {
      position: relative;
      padding-left: 200rpx;
      height: 190rpx;

      &.soldOut::before {
        content: '库存不足';
        position: absolute;
        left: -25rpx;
        top: -25rpx;
        z-index: 998;
        background: #fdeded;
        color: #fd2f3d;
        padding: 8rpx 15rpx;
        font-size: 24rpx;
        border-bottom-right-radius: 10rpx;
      }

      .img {
        position: absolute;
        left: 0rpx;
      }

      .tags {
        white-space: nowrap;
        overflow-x: scroll;
        padding: 10rpx 0 20rpx 0;

        &>span {
          display: inline-block;
          padding: 5rpx 10rpx;
          margin-right: 10rpx;
          border-radius: 10rpx;
          background: #fdeded;
          color: #fd2f3d;
          font-size: 16rpx;
        }
      }

      &.soldOut {
        .tags {
          &>span {
            background: rgba(0, 0, 0, 0.2);
            color: #666;
          }
        }
      }

      .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ff3838;

        .price {
          font-weight: bold;
        }

        .details {
          background: linear-gradient(135deg, #fd2f5d 40%, #fe2f0d);
          color: #fff;
          text-align: center;
          padding: 10rpx 30rpx;
          display: inline-block;
          border-radius: 10rpx;
          font-weight: bold;
        }
      }

      &.soldOut {
        .card-footer {
          color: #666;

          .details {
            background: #ccc;
            color: #666;
          }
        }
      }
    }
  }
</style>